<!-- 开发部：裁断试版/大货采集  蹇泽阳 -->
<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <Find :OriginalFilter="{ static: true }" :formList="formList2" @findClicked="findClicked2" @clickNumber="clickNumber" :searchImg="false" />
    <div class="mt10" style="width: 100%; background-color: white">
      <el-card shadow="never" :body-style="{ padding: '10px 10px 0' }" class="mt10">
        <div slot="header" class="f16">
          <span style="font-weight: 600" class="mr55">扫描下单条码</span>
        </div>
        <div class="flex mt10 f14" style="align-items: center; justify-content: space-between">
          <div class="">PS:扫描指令单标签时，请确认光标置于此栏位</div>
          <div class="">
            <span class="mr10">扫描条码</span>
            <el-input v-model="scanCode" style="width: 414px; height: 25px; font-size: 20px" />
          </div>
          <div>
            <span class="mr10">扫描信息</span>
            <el-input disabled v-model="scanMes" style="width: 200px; height: 25px" />
          </div>
        </div>
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <h1 class="f16">裁断完成采集</h1>
        <Table
          :isLoading="isLoading"
          :tableHeader="tableHeader"
          :tableData="tableData"
          @confirmChange="confirmChange"
          class="mt10"
          :outTableHeight="160"
          @currentRow="currentRow"
        />
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '0px 5px 5px' }">
        <PageModule :PageData="{ total: total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import service from '@/utils/request'
import { debounce } from 'lodash'
import { onMounted, watch } from 'vue'
import LoginWork from '@/utils/LoginWork'
import type { formListType } from '@/components/Find/index.vue'
import { AcquisitionModel, selectList } from '@/plugins/mixin'
import fileRequest from '@/utils/fileRequest'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'AdjudicationCompleted'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const scanCode = ref('')
watch(
  scanCode,
  debounce(async (val) => {
    if (!scanCode.value) return
    let res = await LoginWork.get<any, any>(`/sdUser/stitch/workName?workId=${scanCode.value}`)
    if (res.code === 200) {
      user.value.id = res.data.workerId
      user.value.name = res.data.workerName
      scanMes.value = res.data.workerName
      scanCode.value = ''
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }, 500)
)
const imgList = ref([])
const radio = ref('针辅未配套')
const scanMes = ref('')
const user = ref({
  id: '',
  name: ''
})
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令号',
    inputValue: ''
  },
  {
    type: 'date',
    dateLabel: '客户交期',
    dateValue: ''
  },
  {
    type: 'select',
    selectP: '采集员',
    selectValue: '',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'date',
    dateLabel: '完成日期',
    dateValue: ''
  },
  {
    type: 'checkbox',
    checkboxLabel: '试版',
    checked: true
  },
  {
    type: 'checkbox',
    checkboxLabel: '大货',
    checked: true
  },
  {
    type: 'button',
    checkboxLabel: '置空'
  },
  {
    type: 'button',
    checkboxLabel: '删除当前扫描记录'
  },
  {
    type: 'button',
    checkboxLabel: '查询所有采集信息'
  },
  {
    type: 'button',
    checkboxLabel: '导出日报表'
  }
])
const formList2 = ref([
  {
    type: 'radio',
    checkboxLabel: '试版',
    label: '1'
  },
  {
    type: 'radio',
    checkboxLabel: '大货',
    label: '2'
  },
  {
    type: 'input',
    inputPlaceholder: '请输入试版号/指令号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入号码',
    inputValue: ''
  },
  {
    type: 'select',
    selectP: '大货厂商',
    selectValue: '',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入备注',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入数量',
    inputValue: ''
  },
  {
    type: 'select',
    selectP: '品牌',
    selectValue: '',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'button',
    checkboxLabel: '产量确认'
  }
]) as any
const tableHeader = ref([
  {
    label: '采集类型',
    prop: 'prodType'
  },
  {
    label: '试版号/指令号',
    prop: 'lotNo'
  },
  {
    label: '样品类型',
    prop: 'brand'
  },
  {
    label: '品牌',
    prop: 'shoeName'
  },
  {
    label: '颜色',
    prop: 'color'
  },
  {
    label: '号码',
    prop: 'sizeNo',
    width: 50
  },
  {
    label: '订单数量',
    prop: 'orderQty'
  },
  {
    label: '生产员工',
    prop: 'workerName'
  },
  {
    label: '生产数量',
    prop: 'prodQty'
  },
  {
    label: '采集员',
    prop: 'prodUserName'
  },
  {
    label: '大货厂商',
    prop: 'dutyDept'
  },
  {
    label: '备注',
    prop: 'dutyReason'
  },
  {
    label: '扫描时间',
    prop: 'prodDate'
  },
  {
    type: 'img',
    label: '图片',
    prop: 'photoPath',
    srcList: imgList
  }
])
tableHeader.value.forEach((item: any) => {
  if (item.label === '生产数量' || item.label === '派工数量') {
    item.change = false
  } else {
    item.change = 'Y'
  }
})
// 表一模块
// 表一按钮
const findClicked = async (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '删除当前扫描记录') {
    const res = await LoginWork.post<any, any>(`/pack/collect/deleteByCutAStitch?choose=${1}`, {
      ...currentRowData.value
    })
    if (res.code === 200) {
      JMessage.success('删除成功')
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
  if (content === '查询所有采集信息') {
    getTableList(2)
  }
  if (content === '导出日报表') {
    const res = (await fileRequest.post('/pack/collect/downloadCut', {
      // 选择类型
      choose: '16',
      // 完成日期结束时间
      completeEndTime:
        formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '完成日期')
          ?.dateValue?.[1] || '',
      // 完成日期开始时间
      completeStartTime:
        formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '完成日期')
          ?.dateValue?.[0] || '',
      // 客户交期结束时间
      deliveryEndTime:
        formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '客户交期')
          ?.dateValue?.[1] || '',
      // 客户交期开始时间
      deliveryStartTime:
        formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '客户交期')
          ?.dateValue?.[0] || '',
      // 指令号
      lotNo:
        formList.value.find(
          (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入指令号'
        )?.inputValue || '',
      // 采集类型 1:正单 2：补单 含有 试板/大货的传入试板/大货
      prodStep: cfmFlag(),
      // 采集员
      prodUserName:
        formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '采集员')
          ?.selectValue || '',
      // 货号
      style:
        formList.value.find(
          (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入货号'
        )?.inputValue || '',
      // 生产员工
      workerUser: '',
      // 品牌
      brand:
        formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '品牌')
          ?.selectValue || '',
      // 当前页码
      pageNum: currentPage.value,
      // 每页数量
      pageSize: pageSize.value
    })) as any
    const link = document.createElement('a') // 利用a标签自定义下载文件名
    let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
    link.style.display = 'none'
    //设置连接
    link.href = window.URL.createObjectURL(blob)
    // const FileName = decodeURI(res.headers['content-disposition'].split(`utf-8''`)[1])
    link.download = '裁断试版/大货采集日报表.xls' //自定义文件名字
    document.body.appendChild(link)
    //模拟点击事件
    link.click()
    document.body.removeChild(link)
  }
}
const prodType = ref('试版')
const clickNumber = (val: any) => {
  if (val === '1') prodType.value = '试版'
  else prodType.value = '大货'
}
const findClicked2 = async (content: string) => {
  if (content === '产量确认') {
    const res = await LoginWork.post<any, any>(`/pack/collect/scanInStatusOther?choose=${3}`, {
      brand: formList2.value[7].selectValue,
      choose: '3',
      dutyDept: formList2.value[4].selectValue,
      dutyReason: formList2.value[5].inputValue,
      lotNo: formList2.value[2].inputValue,
      prodQty: formList2.value[6].inputValue,
      prodType: prodType.value,
      prodUser: '',
      prodUserName: '',
      sizeNo: formList2.value[3].inputValue,
      workId: user.value.id,
      workName: user.value.name
    })
    if (res.code === 200) {
      JMessage.success('产量确认成功')
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
}
// 表格计算函数
const cfmFlag = () => {
  const Unaudited = formList.value.find((item: any) => item.type === 'checkbox' && i18n.global.t(item.checkboxLabel) === '试版')
  const Audited = formList.value.find((item: any) => item.type === 'checkbox' && i18n.global.t(item.checkboxLabel) === '大货')
  if (!Unaudited || !Audited) return
  if (Unaudited.checked && Audited.checked) {
    return ''
  } else if (Unaudited.checked) {
    return '试版'
  } else if (Audited.checked) {
    return '大货'
  } else {
    ElMessage('必须至少选择一项')
    Unaudited.checked = true
    Audited.checked = true
    return ''
  }
}
const tableData = ref([])
const isLoading = ref(true)
// 总计
interface summaryDataType {
  index: number
  num: number | undefined
}
// 分页器
const currentPage = ref(1)
// 定义每页显示数量
const pageSize = ref(40)
// 定义总数量
const total = ref(0)
// 定义每页显示数量改变事件
const handleSizeChange = (val: number) => {
  // 将参数赋值给pageSize
  pageSize.value = val
  // 调用获取表格列表函数
  getTableList()
}
// 定义当前页改变事件
const handleCurrentChange = (val: number) => {
  // 将参数赋值给currentPage
  currentPage.value = val
  // 调用获取表格列表函数
  getTableList()
}

// 获取表数据
const getTableList = debounce(async (type = 1) => {
  // 设置加载状态为true
  isLoading.value = true
  // 调用接口获取数据
  let tableDataList = await service.post<any, any>(`/pack/collect/collectAllList?flag=${type}`, {
    // 选择类型
    choose: '16',
    // 完成日期结束时间
    completeEndTime:
      formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '完成日期')
        ?.dateValue?.[1] || '',
    // 完成日期开始时间
    completeStartTime:
      formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '完成日期')
        ?.dateValue?.[0] || '',
    // 客户交期结束时间
    deliveryEndTime:
      formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '客户交期')
        ?.dateValue?.[1] || '',
    // 客户交期开始时间
    deliveryStartTime:
      formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '客户交期')
        ?.dateValue?.[0] || '',
    // 指令号
    lotNo:
      formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入指令号'
      )?.inputValue || '',
    // 采集类型 1:正单 2：补单 含有 试板/大货的传入试板/大货
    prodStep: cfmFlag(),
    // 采集员
    prodUserName:
      formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '采集员')
        ?.selectValue || '',
    // 货号
    style:
      formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入货号'
      )?.inputValue || '',
    // 生产员工
    workerUser: '',
    // 品牌
    brand:
      formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '品牌')?.selectValue ||
      '',
    // 当前页码
    pageNum: currentPage.value,
    // 每页数量
    pageSize: pageSize.value
  })
  // 设置加载状态为false
  isLoading.value = false
  // 设置图片列表
  imgList.value = tableDataList.list.map((item: any) => {
    return item.photoPath
  })

  // 设置表格数据
  tableData.value = tableDataList.list.map((item: any) => {
    item.prodQty = Number(item.prodQty).toFixed(2)
    item.change = true
    // 设置交期日期
    // item.deliveryDate = item.deliveryDate.split(' ')[0]
    return item
  })
  // 设置总数量
  total.value = tableDataList.total
  // 设置汇总数据
  // summaryData.value[0].num = tableDataList.prodTotal
}, 500)
// 挂载时调用
onMounted(() => {
  getTableList()
})
// 监听表单数据变化时调用
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)
const getSelectList = async () => {
  await selectList(formList, () => service.get('/pcOrder/getPcOrderDataRsjCondition'))
  // await selectList(formList, () => service.get('/back/order/allOrderCondition'))
  await selectList(formList2, () => service.get('/yield/getCutYieldCondition'))
  AcquisitionModel(3, formList)
  formList2.value[4].selectOptions?.push(
    {
      optionKey: '荣阳',
      optionValue: '荣阳',
      optionLabel: '荣阳'
    },
    {
      optionKey: '金莱克',
      optionValue: '金莱克',
      optionLabel: '金莱克'
    }
  )
}
// 当组件挂载完成时，调用getSelectList函数
onMounted(() => {
  getSelectList()
})

// 点击表给另一张表传数据
const currentRowData = ref({})
const currentRow = async (row: any = tableData.value[0] ? tableData.value[0] : {}) => {
  currentRowData.value = row
}

const confirmChange = async (row: any) => {
  const res = (await LoginWork.post('/pack/updatePcOrderStatus', row)) as any
  if (res.code === 200) {
    JMessage.success('修改成功')
  } else {
    JMessage.error(res.message)
    getTableList()
  }
}
</script>

<style lang="less" scoped></style>
